<template>
	<div>
		<van-list @load="load" :loading="loading" :finished="finished"
			:finished-text="finishedText"
		>
			<ListItem 
				v-for="(v, i) in list" 
				:key="i" 
				:item="v"
				@click="$router.push({ name: 'post', params: { id: v.id }})"
			></ListItem>
		</van-list>
	</div>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex'
import { RootState } from '@/store'
import { computed } from '@vue/reactivity';
import { onMounted, reactive, ref } from 'vue';
import ListItem from '@/components/ListItem/index.vue'
import { Notify } from 'vant'

const store = useStore<RootState>();

const list = computed(() => store.state.list)

const loading = ref(false)
const finished = ref(false)
const finishedText = ref('')
const pageConfig = reactive({
	pageCode: 1,
	pageSize: 50
})

const load = () => {
	loading.value = true
	store.dispatch('fetchList', pageConfig).then(data => {
		loading.value = false
		pageConfig.pageCode++
		// 成功通知
		Notify({ type: 'success', message: data.message });
	}).catch((error) => {
		loading.value = false
		finished.value = true
		finishedText.value = error
	})
}



onMounted(() => {
	load()
})

</script>